静态页面技巧
(一) 后代选择器的问题
- 要分块, 每一块用一个div包起来, 写上注释
- 要使用后代选择器, 不然容易冲突
- 选择器的层级不宜超过3层
(二) 命名技巧
尽量用英文
常用英文单词
中文 英文 中文 英文 1. 头部 header 2. 主体 main 3. 底部 footer 4. 导航 nav 5. 标志 logo 6. 列表(ul) list xxx-list 7. 列表选项(li) item 8. 左 left 8. 中间 center 9. 右边 right 10. 侧边栏 side 11. 菜单 menu 12. 标题 title 13. 文本包裹层 text-box 14. 文本 text 15. 多个文本
text1, text2, text316. 按钮 btn 17. 图片 img 18. 输入框 inp 19. 横幅 banner 20. 轮播图 swiper 21. 内容 content 22. 图标 icon 23. 链接 link
(三) 预处理语言less
安装easy-less 插件
下面的代码
.footer { .item { .text { color: red; } } } // 会转变为 .footer .item .text { color: red; }
(四) 公共样式和组合式写法
1. .flex
2. .jc-c
3. .jc-sb
4. .jc-sa
5. .aic
5. .fg1
6. .fww
7. .rel
8. .abs
9. .fixed
10. .dsn
11. .w100p
12. .h100p
13. .fff
14. .bg-fff
15. .base
16. .bg-base
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li { list-style: none; }
/* 公共样式 */
/* body的背景颜色 */
body { background-color: #f4f4f4; }
/* 相对定位 */
.rel { position: relative; }
/* 绝对定位 */
.abs{ position: absolute }
/* 固定定位 */
.fixed { position: fixed; }
/* 隐藏 */
.dsn { display: none; }
/* 宽度100% */
.w100p { width: 100%; }
.h100p { height: 100%; }
/* 颜色 */
.fff { color: #fff; }
.bg-fff { background-color: #fff; }
/* 主题色 */
.base { color: #f03d37; }
.bg-base { background-color: #f03d37; }
/* 字体 */
.f10 { font-size: 10px; }
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
.f30 { font-size: 30px; }
.f32 { font-size: 32px; }
.f34 { font-size: 34px; }
.f36 { font-size: 36px; }
/* 弹性盒子 */
.flex { display: flex; }
.jc-c { justify-content: center; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }
.aic { align-items: center; }
/* 盒子排成一列 */
.fdc { flex-direction: column; }
/* 剩余空间分配 */
.fg1 { flex-grow: 1; }
.fww {flex-wrap:wrap;}
/* margin */
.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}
.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mb-5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}
/* padding */
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}
.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-25 {padding-left: 25px;}
.pl-30 {padding-left: 30px;}
.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-25 {padding-right: 25px;}
.pr-30 {padding-right: 30px;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}